<template>
  <div class="left-container">
     <h4>我是num数据{{num}}</h4>
    <h3>Right 组件 ---- 是否全选:{{$store.getters.isAll}}</h3>
   
    <hr>

    <!-- 完整书写 -->
    <!-- <p>count 值：{{this.$store.state.count}}</p> -->
    <!-- 在 template 中可以省略 this.  直接使用$store  在script中就必须使用this-->
    <!-- <p>count 值：{{$store.state.count}}</p> -->
    <!-- mapState辅助函数 -->
    <p>count 值：{{count}}</p>
    <!-- 注意: 在数组中直接修改 state 的数据,是错误的被禁止的!!!!!!!! -->
    <!-- <button @click="$store.state.count++" class="btn btn-primary">+1</button> -->
    <!-- 想要修改 state 的数据, 必须通过mutation来修改 -->
    <!-- <button @click="$store.commit('add',{name:'141',num:10})" class="btn btn-primary">+1</button> -->
    <!-- <button  @click="add({num:-5})" class="btn btn-warning">-1</button> -->
     <button @click="test" class="btn btn-primary">+1</button>

  </div>
</template>
 
<script>
// 1.按需导入 mapState  
import {mapMutations, mapState,} from 'vuex'
// console.log(nampState(['count']));//获得一个对象{count;f},对象中只有一个 count 函数
// ...{count: f } -->  count() {}

// 计算属性是什么? 函数
// 小结:
// 1. mapState 本质是一个函数，返回值是一个对象
// 2. mapState 需要传入一个数组， 数组中定义要映射过来的全局数据
// 3. mapState 会返回一个对象，对象中存储了数据名对应的函数
// 4. 只需要使用 ... 扩展运算符 展开的结果就可以得到映射过来的计算属性
// 5. mapState 要写在计算属性computed中
 
export default {
  name: 'Left', 

  computed:{
    // 2. 调用 mapState 并将结果展开放入计算属性中
    // 多一个 count 计算属性
    ...mapState(['count']),
    ...mapState('count',['num'])
  },
  methods:{
    ...mapMutations('conut',['test'])
  }

}
</script>

<style>
</style>
